<template>
	<div>
		<div class="topmenu">
			<scroll-view scroll-x class="radius-box">
				<ul class="menu-list"  :style="'background:' + mydata.bg_color">
					<li
						:style="{color: i == tab_id ? mydata.active_text_color : mydata.text_color, background: i == tab_id ? mydata.active_bg_color : mydata.bg_color}"
						v-for="(item, i) in mydata.list"
						:key="i"
						class="menu-item"
						v-bind:class="i == tab_id ? 'active' : ''"
						@click="changetab(i)"
					>
						<span>
							{{ item.name }}
							<i class="after" :style="'background:' + mydata.active_text_color"></i>
						</span>
					</li>
				</ul>
			</scroll-view>
		</div>
	</div>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import store from '@/store';
export default {
	data() {
		return {};
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	computed: {
		...mapState({
			tab_id: state => state.tab_id
		})
	},
	methods: {
		changetab(i) {
			store.commit('settab', i);
			this.$nextTick(function(){
				this.$emit('changtab', i);
			})
			
			
		}
	}
};
</script>

<style lang="scss" scoped>
ul {
	list-style: none;
}
.topmenu {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 99999;
	.radius-box {
		overflow-x: auto;
		overflow-y: hidden;
	}
	.menu-list {
		overflow-x: auto;
		display: flex;
		flex-wrap: nowrap;
		align-self: center;
		background: white;
		position: relative;
		white-space: nowrap;
		width: 750rpx;
		line-height: 80rpx;
		justify-content: center;
		width: fit-content;
		min-width: 100%;
		.menu-item {
			color: #666666;
			font-size: 28rpx;
			height: 80rpx;
			padding: 0 32rpx;
			min-width: 150rpx;
			line-height: 80rpx;
			box-sizing: border-box;
			border: 0;
			border-radius: 0;
			text-align: center;
			position: relative;
			cursor: pointer;
			flex-shrink: 0;
			&.active {
				.after {
					position: absolute;
					left: 50%;
					bottom: 0;
					-webkit-transform: translate(-50%, 0);
					transform: translate(-50%, 0);
					width: 56rpx;
					height: 4rpx;
					background: #ef4f4f;
				}
			}
		}
	}
}
</style>
